<template>
  <!-- 采购订单  销售信息  -->
  <el-dialog
    title="销售信息"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="860px"
    @close="close"
  >
    <div class="form-box" v-if="orderInfo">
      <el-descriptions  title="采购信息"  border :column='1'>
        <el-descriptions-item label-class-name="label-txt" label="供货商">
           {{ orderInfo.supplyTenantName }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="label-txt" label="商品编号">{{ orderInfo.goodsId }}</el-descriptions-item>
        <el-descriptions-item  label-class-name="label-txt" label="订单金额">{{ orderInfo.actualAmount }}</el-descriptions-item>
      </el-descriptions>
      <div style="color: #333; margin-top: 15px;font-size: 16px;margin-bottom: 10px;">
        <b >销售信息</b>
      </div>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :inline="true"
        label-width="80px"
        :rules="rules"
        class="new_form_box"
      >
      <el-form-item label="销售渠道" prop="qudao">
          <el-input v-show="false" v-model="ruleForm.qudao" placeholder="请输入" />
          <span class="phone-box flex" style="width: 200px;">
            <span class="name" v-if="ruleForm.qudao">{{ ruleForm.qudao }}</span>
            <el-button type="text" @click="openSelectQudao(2)">
              选择
            </el-button>
            <el-button v-if="ruleForm.qudao" type="del" @click="delPhone">
              清空
            </el-button>
          </span>
        </el-form-item>
        <el-form-item label="销售单号" prop="danhao">
          <el-input v-model="ruleForm.danhao" placeholder="请输入销售单号" />
        </el-form-item>
        <el-form-item class="row" label="销售截图" prop="jietu">
          <uploadImageOne v-model="ruleForm.jietu" style="padding: 10px 15px 15px;"></uploadImageOne>
        </el-form-item>
      </el-form>

      <div class="center" >
        <el-button @click="close">关闭</el-button>
        <el-button
          type="primary"
          @click="submitForm"
          :loading="loading"
          >确认</el-button
        >
      </div>
    </div>
    <!-- 渠道选择 -->
    <qudaoDialog ref="qudaoDialog" @change="getSelectQudao"></qudaoDialog>
  </el-dialog>
</template>

<script>
import orderApi from "@/api/pickUp/order";
import qudaoDialog from "../../recycleManage/recycleOrders/qudaoDialog.vue";
export default {
  name: "",
  components:{qudaoDialog},
  data() {
    return {
      loading: false,
      isShow: false,
      orderInfo:null,
      ruleForm: {
        id: null,
        qudao: "",
        danhao: "",
        jietu: "",
        saleOrderId:''
      },
      rules: {
      
      },
     
    };
  },
  created() {
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  methods: {
    open(order) {
      this.ruleForm.id = null
      this.ruleForm.saleOrderId = null
      this.orderInfo = order
      // 查询采购订单的销售信息
      this.getSaleInfo()
      this.isShow = true;
    },
    getSaleInfo(){
      if(!this.orderInfo.caigouId){
        this.ruleForm.saleOrderId = this.orderInfo.id
        return 
      }
      this.loading = true
      orderApi.saleOrderCaigouQueryByid(this.orderInfo.caigouId).then(res=>{
        this.loading = false
        if(res.data){
          this.ruleForm = JSON.parse(JSON.stringify(res.data))
        }
      }).catch(err=>{
        this.loading = false
      })

    },
  
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if(this.ruleForm.id){
            orderApi.saleOrderCaigouEdit(this.ruleForm).then((res) => {
              this.isShow = false;
              this.loading = false;
              
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.$parent.getList();
              }
            }).catch(err=>{
              this.loading = false;
            })
          }else{
            orderApi.saleOrderCaigouAdd(this.ruleForm).then((res) => {
              this.isShow = false;
              this.loading = false;
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.$parent.getList();
              }
            }).catch(err=>{
              this.loading = false;
            })
          }
          
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
   

    close() {
      this.$refs.ruleForm.resetFields()
      this.isShow = false;
    },
     //  取消选中渠道
     delPhone() {
      this.ruleForm.qudao = "";
    },
    // 打开渠道选择
    openSelectQudao(type) {
      this.$refs.qudaoDialog.open(type);
    },
    // 渠道选择完成
    getSelectQudao(item) {
      this.ruleForm.qudao = item.name;
    },
    /**选择相关  end*/
  },
};
</script>
<style scoped lang="scss">
.form-box {
  ::v-deep .label-txt{
    width: 100px;
  }
}
.center {
  text-align: center;
}

</style>
